import { useState, memo, forwardRef, useMemo, useRef, useEffect } from 'react'
import { DatePicker } from 'antd'
import dayjs from 'dayjs'
import moment from 'moment'
import * as echarts from 'echarts'
import './index.scss'
const LineChart = forwardRef((props: any, ref: any) => {
    const { data = [], type = 1, title = "打印文件", month, year } = props
    const lineRef = useRef<any>(null)
    const myLine = useRef<any>(null)
    const [defaultMonth, setDefaultMonth] = useState<string>(`${dayjs().month() + 1}`)
    const typeName = useMemo(() => {
        if (type === 1) {
            return "打印";
        } else if (type === 2) {
            return "刻录";
        } else if (type == 3) {
            return "刻录";
        } else {
            return "扫描";
        }
    }, [type])

    const handleDataChange = (val: any) => {
        const data = val.format('MM')
        setDefaultMonth(data)
        month && month(data)
    }
    const initChart = async () => {
        await 1;
        const option = {
            tooltip: {
                trigger: "axis",
                formatter: (params: any) => {
                    return `${year}-${defaultMonth}-${params[0].axisValue} </br> ${params[0].marker}   ${params[0].seriesName}  ${params[0].data}`;
                },
            },
            color: ["#0080ff", "#4cd5ce"],
            grid: {
                left: "3%",
                right: "4%",
                bottom: "5%",
                top: "8%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    data: new Array(data.length).fill(0).map((item, index) => `${index + 1}`),
                    axisLine: {
                        lineStyle: {
                            color: "#999",
                            type: "dashed",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                    },
                    axisTick: {
                        show: false,
                        alignWithLabel: true,
                    },
                },
            ],
            yAxis: [
                {
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#f1f1f1",
                        },
                    },
                },
            ],
            series: [
                {
                    name: typeName,
                    type: "line",
                    stack: "总量",
                    itemStyle: {
                        // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#81befd", // 0% 处的颜色
                            },
                            {
                                offset: 0.4,
                                color: "#e4f2ff", // 100% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#fff", // 100% 处的颜色
                            },
                        ]), // 背景渐变色
                    }, // 线条样式
                    lineStyle: {
                        // 系列级个性化折线样式
                        width: 3,
                        type: "solid",
                        color: "#0180ff", // 折线的颜色
                    },
                    emphasis: {
                        color: "#0180ff",
                        lineStyle: {
                            // 系列级个性化折线样式
                            width: 2,
                            // color: '0180ff'
                        },
                    },
                    symbolSize: 0, // 折线点的大小
                    areaStyle: {},
                    smooth: true,
                    data: data,
                },
            ],
        };
        myLine.current.setOption(option);
    }
    useEffect(() => {
        myLine.current = echarts.init(lineRef.current)
    }, [])
    useEffect(() => {
        initChart()
    }, [data])
    return (
        <>
            <div className="line-chart">
                <div className="header flex-between">
                    <div className="title">
                        {title}
                        <span style={{ fontSize: '12px', fontWeight: 400 }}>({type === 1 ? "页" : "张"})</span>
                        <span style={{ fontSize: '12px', color: '#999', marginLeft: '8px' }}>按月统计</span>
                    </div>
                    <DatePicker
                        format={`${year}年-M月`}
                        value-format="MM"
                        defaultValue={moment(`${dayjs().month() + 1}`, 'MM')}
                        picker='month'
                        placeholder="请选择月份"
                        size='small'
                        style={{ marginLeft: '10px', width: '135px' }}
                        onChange={handleDataChange}
                        allowClear={false}
                    ></DatePicker>
                </div>
                <div className="chart" ref={lineRef} style={{ height: 'calc(100% - 37px)' }}></div>
            </div>
        </>
    )
})
export default memo(LineChart)